<template>
  <div class="record-view">
    <div class="bg-fff" style="background: #fff; padding: 20px">
      <!-- <span class="des">仅提供指定某天访问明细，最多43200条【近6个月数据】</span>
        <span class="time-des" v-loading="targetTimeLoading">
          <Countdown v-if="targetTime > 0" :targetTime="targetTime" @handleUpdate="getData"/>
          之后更新数据</span> -->
      <!-- 顶部站点切换和导出 -->
      <!-- <SiteAndExport @changeSite="handleChangeSite" :params="params" :interface="'getViewRecord'" /> -->
      <!-- 时间选择 -->
      <div class="date-select">
        <div class="select-left">
          <span>时间范围：</span>
          <el-radio-group v-model="radio1" @change="handleTimeRadioChange">
            <el-radio :label="1">今日</el-radio>
            <el-radio :label="2">昨日</el-radio>
          </el-radio-group>
          <div style="margin-left: 20px">
            <el-date-picker v-model="dateRange" style="width: 100%" type="datetimerange" value-format="x" clearable placeholder="自定义时间" @change="handleCustomTimeChange" />
          </div>
        </div>
      </div>
    </div>

    <div class="table-content">
      <RuifoxTable :loading="chartLoading" :default-index="true" v-model:tableData="tableData" v-model:fieldList="fieldList">
        <template #requestTime="{ element }">
          {{ dayjs(element.requestTime).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
      </RuifoxTable>
      <PaginationView :total="total" :pageSize="params.pageSize" :currentPage="params.currentPage" :canChoose="false" @refreshList="getData" @changeSize="handleSizeChange" @currentChange="handleCurrentChange" />
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive, watch } from 'vue'
import { getStationRecord } from '@/api/log'
import { getStartAndEndTimes } from '@/utils/tools'
import { useStore } from 'vuex'
import dayjs from 'dayjs'

const store = useStore()
const fieldList = ref([
  {
    title: '访问时间',
    name: 'requestTime',
    width: 300
  },
  {
    title: '访问IP',
    name: 'ip',
    width: 300
  },
  {
    title: '地区',
    name: 'city',
    width: 300
  },
  {
    title: '访问栏目',
    name: 'catName',
    width: 150
  },
  {
    title: '访问地址',
    name: 'url'
  }
])

const chartLoading = ref(false)
const total = ref(0)
const defaultRange = getStartAndEndTimes(0)
const params = reactive({
  currentPage: 1,
  pageSize: 15,
  siteId: '',
  startTime: defaultRange[0].getTime(),
  endTime: defaultRange[1].getTime()
})
const radio1 = ref(1)
const handleSizeChange = val => {
  params.pageSize = val
  getData()
}
const handleCurrentChange = val => {
  params.currentPage = val
  getData()
}
//查询时间选择
const dateRange = ref([defaultRange[0].getTime(), defaultRange[1].getTime()])
// 获取列表数据
const tableData = ref()
const getData = async () => {
  chartLoading.value = true
  params.siteId = store.state.site.currentSite?.id
  try {
    let res = await getStationRecord(params)
    if (res.code === 20000) {
      tableData.value = res.data.list
      total.value = res.data.total
    }
  } catch {
    chartLoading.value = false
  }
  chartLoading.value = false
}
// 选择昨日今日
const handleTimeRadioChange = val => {
  if (val === 1) {
    params.startTime = dayjs().startOf('day').valueOf()
    params.endTime = dayjs().valueOf()
  } else if (val === 2) {
    params.startTime = dayjs().subtract(1, 'day').startOf('day').valueOf() 
    params.endTime = dayjs().subtract(1, 'day').endOf('day').valueOf()
    dateRange.value = [params.startTime, params.endTime]
  }
  getData()
}
// 自定义时间
const handleCustomTimeChange = val => {
  params.startTime = val[0]
  params.endTime = val[1]
  radio1.value = null
  getData()
}

watch(dateRange, () => {
  if (dateRange.value && dateRange.value[0]) {
    params.startTime = dateRange.value[0]
    params.endTime = dateRange.value[1]
  } else {
    params.startTime = ''
    params.endTime = ''
  }
  getData()
})
onMounted(() => {
  getData()
})
</script>
<style lang="scss" scoped>
.record-view {
  .bg-fff {
    position: relative;
    .des {
      position: absolute;
      top: 23px;
      left: 224px;
      font-size: 14px;
      color: #999;
    }
    .time-des {
      position: absolute;
      top: 23px;
      right: 110px;
      font-size: 14px;
      color: #666;
      display: flex;
      align-items: center;
    }
  }
  .date-select {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .select-left {
      display: flex;
      align-items: center;
      .el-radio {
        margin-right: 8px;
      }
      span {
        margin-right: 10px;
      }
    }
    .select-right {
    }
  }
  .table-content {
    margin-top: 10px;
    ::v-deep .el-table th.el-table__cell {
      background-color: #f2f2f2;
      color: #333333;
    }
    .page-pagination {
      display: flex;
      justify-content: flex-end;
      padding: 15px;
      background: #ffffff;
    }
  }
}
</style>
